<template>
  <div class="tag-group my-2 flex flex-wrap gap-4 items-center">
    <el-tag
      v-for="(item, index) in items"
      :key="item.label + index"
      class="mx-1"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const items = ref<
  {
    type: string
    label: string
  }[]
>([
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'success', label: '中国政府网' },
  { type: 'success', label: '百度一下' },
  { type: 'info', label: '网易云' },
  { type: 'danger', label: '飞书' },
  { type: 'warning', label: '阿里云' },
  { type: 'warning', label: '阿里云' },
])
</script>
